<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./carData.js"></script>
    <style>
      li {
        width: 200px;
      }
      ul {
        height: 1200px;
        background-color: red;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul class="list">
        <li v-for="(list,letter) in carObj">
          <h3>{{letter}}</h3>
          <div>
            <button v-for="item in list">{{item.name}}</button>
          </div>
        </li>
      </ul>
    </div>
  </body>
  <script>
    // 数据分类
    /*
      {
        A:[
          {},
          {},
          {}
        ],
        B:[
          {},
          {},
          {}
        ]
      }
    */
    let carObj = {}; //存储分类结果
    carData.forEach((item) => {
      let s = item.brand.split(" - ");
      item.name = s[1]; //品牌名
      if (carObj[s[0]] == undefined) {
        // 还没存过这个字母的
        carObj[s[0]] = [item];
      } else {
        // 已经有了
        carObj[s[0]].push(item);
      }
    });

    let app = Vue.createApp({
      data() {
        return {
          carObj,
        };
      },
    });
    app.mount("#app");
  </script>
</html>
